<template>
    <MainLayout :title="pageTitle" :breadcrumbItems="breadcrumbItems">
        <template #sidebar>
            <SideNav :items="navConfig" :active="currentNav.type" @select="handleSelect" />
        </template>

        <template #content>
            <Filter :items="filterData" @change="handleCategoryChange" />
            <template v-if="collectItems.length">
                <ContentList :items="collectItems" prevtype="center" :type="currentNav.type" :collectType="currentCollectType" :secondType="secondCollectType" />
                <Pagination :current-page="currentPage" :total-pages="totalPages"
                    :base-url="`/center/${currentNav.type}`" />
            </template>
            <div v-else class="empty">暂无数据</div>
        </template>
    </MainLayout>
</template>

<script setup>
import MainLayout from '@/components/ListPage.vue'
import SideNav from '@/components/list/SideNav.vue'
import Filter from '@/components/user-center/filter.vue'
import ContentList from '@/components/user-center/list.vue'
import Pagination from '@/components/list/Pagination.vue'

import { ref } from 'vue'
const route = useRoute()
const router = useRouter()
const pageTitle = ref('个人中心')
const { $fetchAuth } = useNuxtApp()
const totalPages = ref(0);
const currentCategory = ref('')
const currentCategoryId = ref('')
const currentCollectType = ref('')
const secondCollectType = ref('')
const localePath = useLocalePath()
const collectItems = ref([])
const pending = ref(false)
const { data: filters } = await useAsyncData(
    'collcet-filter',
    () => {
        return $fetchAuth('/app/api/channel', {
            method: 'GET',
            params: {
                isIncludeChildren: true,
                isTree: true,
                offset: 0,
                isCollect: true
            }
        })
    })

const filterData = computed(() => {
    return filters.value?.data
})

const pageSize = 10

// 分页相关逻辑
const currentPage = computed({
    get: () => parseInt(route.query.page) || 1,
    set: (val) => updateRouteQuery({ page: val > 1 ? val : undefined })
})

// 分类变化时重置页码
const handleCategoryChange = (newCategoryId) => {
    currentCategoryId.value = newCategoryId.secondCategory
    currentCollectType.value = newCategoryId.categoryType
    secondCollectType.value = newCategoryId.secondCategoryType
    currentPage.value = 1 // 会触发路由更新
}

const updateRouteQuery = (newQuery) => {
    router.replace({
        path: route.path,
        query: {
            ...route.query,
            ...newQuery
        }
    })
}

// 数据获取方法
const fetchCollectionData = async () => {
    const page = currentPage.value;

    const { data } = await $fetchAuth('/app/api/core/user-collects', {
        params: {
            channelId: currentCategoryId.value,
            page,
            pageSize: pageSize
        }
    })
    collectItems.value = data.content
    totalPages.value = data.totalPages
}

// 统一参数监听
watch(
    [() => currentCategoryId.value, () => route.query.page],
    async ([newCategoryId, newPage]) => {
        if (!newCategoryId && !route.query.page) return;
        
        try {
            pending.value = true
            await fetchCollectionData()
        } finally {
            pending.value = false
        }
    },
    { immediate: true }
)

// 导航配置
const navConfig = [
    {
        type: 'my-collection',
        title: '我的收藏',
        path: '/center/my-collection',
    }
]

// 获取当前导航状态
const currentNav = computed(() =>
    navConfig.find(nav => nav.type === route.params.type) || navConfig[0]
)


// 面包屑导航
const breadcrumbItems = computed(() => [
    { title: '首页', path: '/' },
    { title: '个人中心', path: '/center' },
    { title: currentNav.value.title }
])


// 切换导航处理
const handleSelect = async (item) => {
    router.push(
        localePath({
            path: `/center/${item.type}`
        })
    )
}
</script>

<style scoped>
/* 添加样式 */
</style>